<template>
  <div class="menubox">
    <div class="menu">
    <flexbox style="text-align: center;padding:5px 0px 0px 0px;">
      <flexbox-item v-for="(item,index) in list" v-bind:key="item.index">
        <!-- <router-link :to="item.link" :class="item.class" > -->
        <!-- <icon :name="item.icon"></icon> -->
        <div ref="clickItem" @click="getItemIndex(index,item.id,item)" v-bind:class="(choseindex == index)?'csed':''">
          <van-icon :name="item.icon" />
          <p>{{item.name}}</p>
        </div>
        <!-- </router-link> -->
      </flexbox-item>

    </flexbox>
    </div>
  </div>
</template>
<script>
  import { Flexbox, FlexboxItem } from 'vux'
  import { Icon } from 'vant'
  import * as types from '../../store/types'

  export default {
    components: {
      'van-icon': Icon,
      Flexbox, FlexboxItem
    },
    props: {
      list: []
    },
    data() {
      return {
        //menuData: this.getMenuData()
        choseindex: -1,
        value: '',
        item: '',
      }
    },
    methods: {
      /* getMenuData() {
        //TODO 后台请求
        // if(){

        // }
        // return types.MENU_GROUP_DATA
      } */
      getItemIndex(index, id, item){
        this.choseindex = index
        this.$emit('getItemIndex', id, item)
      }
    }
  }
</script>
<style scoped>
  body {
    background-color: #EFEFF4;
  }
  .menubox{
    background-color: #EFEFF4;
    padding: 20px;
  }
  .menu {
    background-color: #FFFFFF;
    /* margin: 20px; */
    border-radius: 10px;
    border: 2px solid #FFFFFF;
    box-shadow: #C0C0C0 0px 0px 5px;
  }
  .van-icon {
    font-size: 24px;
  }

  .vux-flexbox-item > a >p {
    color:black;font-size:.8rem;
  }
  .vux-flexbox-item p {
    font-size: 14px;
  }
  .one{
    color:#4285F4;
  }
  .two{
    color:#EA4335;
  }
  .there{
    color:#FBBC05;
  }
  .four{
    color:#34A853;
  }
  .five{
    color:#4285F4;
  }
  .csed{
    color: #FD5200;
  }
</style>
